<template>
  <div>
    <el-input-number v-model="num" :min="1" :max="31" @change="handleChange" />
    <div class="slider-demo-block">
      <el-slider v-model="slider" :min="0" :max="100" />
      {{ slider }}
    </div>
    <div>
      <button @click="toEndClick">至末尾</button>
    </div>
  </div>
</template>

<script setup>
import { tranx, scaleXAxis } from "../t2.js";
import { ref, effect, reactive, onMounted } from "vue";
const slider = ref(0);
const num = ref(6);
effect(() => {
  let per = slider.value / 100;
  tranx(per);
});

effect(() => {
  scaleXAxis(num.value);
});

function toEndClick() {
  tranx(1);
}

function handleChange() {}

onMounted(toEndClick);
</script>

<style>
.slider-demo-block {
  display: flex;
  align-items: center;
  width: 200px;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
